import ReactEcharts from 'echarts-for-react'
import * as echarts from 'echarts'
import merge from 'lodash.merge'
import clonedeep from 'lodash.clonedeep'

import '../tooltip.less'

const Bar: React.FC = (props: object) => {
    const defaultSeries: any = {
        // 普通线条
        normal: {
            type: 'bar',
            barWidth: '20%',
            barBorderRadius: 5,
            barGap: 0,
            emphasis: {
                focus: 'series',
            },
            itemStyle: {
                color: '#47A4F8',
            },
        },
        orange: {
            type: 'bar',
            barWidth: '20%',
            barGap: 0,
            emphasis: {
                focus: 'series',
            },
            itemStyle: {
                color: '#fff',
            },
        },
    }
    const defaultOption: any = {
        normal: {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
                backgroundColor: 'rgba(0,0,0,0.6)', // 背景
                padding: [8, 10], //内边距
                extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                borderColor: '#ffffff00',
                textStyle: {
                    fontSize: 16,
                    color: '#fff',
                },
            },
            legend: {
                left: 20,
                icon: 'rect',
                itemHeight: 5,
                itemWidth: 18,
                textStyle: {color: '#FFFFFF', fontSize: 16},
                itemGap: 10,
                // data: [
                //   {
                //     name: '景区',
                //     itemStyle: { color: '#67D4F1' }
                //   },
                //   {
                //     name: '博物馆',
                //     itemStyle: { color: '#F29E39' }
                //   }
                // ]
            },
            grid: {
                left: 50,
                top: 120,
                right: 30,
                bottom: 20,
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: false,
                },
                // data: ['05/1', '05/2', '05/3', '05/4', '05/5'],
                axisLabel: {
                    fontSize: 16,
                    color: 'rgba(255, 255, 255, 0.9)',
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    fontSize: 16,
                    color: 'rgba(255, 255, 255, 0.9)',
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0)',
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 1)',
                    },
                },
                nameTextStyle: {
                    fontSize: 18,
                    padding: [0, 70, 10, 0],
                    color: 'rgba(255, 255, 255, 0.6)',
                },
            },
        },
    }
    const mergeOption = (option: any = {}) => {
        const newOption = merge(
            {},
            defaultOption[option.styleType || 'normal'],
            option,
        )
        return newOption
    }

    const mergeSerie = (serie: any = {}) => {
        const newSerie = merge(
            {},
            defaultSeries[serie.styleType || 'normal'],
            serie,
        )
        return newSerie
    }

    const chartOptionMerge = () => {
        const propsOption = props.option || {}
        if (propsOption.series && propsOption.series.length) {
            propsOption.series = propsOption.series.map((item: any) => {
                item = mergeSerie(item)
                return item
            })
        }
        const option = mergeOption(propsOption)
        return option
    }
    return (
        <ReactEcharts
            echarts={echarts}
            {...props}
            option={clonedeep(chartOptionMerge())}
        />
    )
}
export default Bar
